<template>
	<view class="layout">
		<view class="content">
			<view class="item">
				<text>日期：</text>
				<text>{{formatDate(info.startTime)}}</text>
			</view>
			<view class="item">
				<text>姓名：</text>
				<text>{{info.username}}</text>
			</view>
			<view class="item">
				<text>时间：</text>
				<text>{{formatTime(info.startTime)}}-{{formatTime(info.stopTime)}}</text>
			</view>
			<view class="item">
				<text>学习学时：</text>
				<text>{{msToTime(info.spendTime)}}</text>
			</view>
			<view class="item">
				<text>所选词库：</text>
				<text>{{info.title}}</text>
			</view>
<!-- 			<view class="item">
				<text>学习进度：</text>
				<text>0%</text>
			</view> -->
			<template v-if="info.mode === 0">
				<view style="display: flex; justify-content: space-between;">
					<view class="item">
						<text>学新词汇：</text>
						<text>{{info.studyCount}}</text>
					</view>
					<view class="item">
						<text>学新遗忘词汇：</text>
						<text>{{info.wrongCount}}</text>
					</view>
				</view>
				<view class="item">
					<text>学新遗忘率：</text>
					<text>{{info.forgettingRate}}%</text>
				</view>
			</template>
			<template v-else-if="info.mode === 1">
				<view style="display: flex; justify-content: space-between;">
					<view class="item">
						<text>复习词汇：</text>
						<text>{{info.studyCount}}</text>
					</view>
					<view class="item">
						<text>复习遗忘词汇：</text>
						<text>{{info.wrongCount}}</text>
					</view>
				</view>
				<view class="item">
					<text>复习遗忘率：</text>
					<text>{{info.forgettingRate}}%</text>
				</view>
			</template>
			
			<text>
				教练评语：
			</text>
<!-- 			<view class="comment">
				<text>
					{{info.comment}}
				</text>
			</view> -->
			<view class="textarea" >
				<textarea class="" v-model="info.comment" :disabled="editMode === 0" @blur="bindTextAreaBlur" maxlength="-1"/>
			</view>
			
			
		</view>
		
		<view class="confirmBtn" @click="onClickConfirm" v-if="editMode === 0">
			确定
		</view>
		<view class="summitBtn" @click="onClickSummit" v-else-if="editMode === 1">
			提交修改
		</view>
		

	</view>
</template>

<script setup>
	import {ref, computed} from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	// "67eb93c22eea65fc6cda5030"
	const info = ref({
		_id: "",
		relateUuid: "",
		wordBankId: "",
		title: "",
		username: "",
		mode: 0,
		studyCount: 0,
		wrongCount: 0,
		accuracy: "",
		forgettingRate: "",
		words: [],
		startTime: 0,
		stopTime: 0,
		spendTime: 0,
		comment: ""
	});
	
	const editMode = ref(0)
	
	onLoad(async (e) => {
		// console.log(e.feedbackId)
		editMode.value = parseInt(e.editMode)
		
		const res = await uniCloud.callFunction({
			name: "getFeedback",
			data: {
				// id: "67eb93c22eea65fc6cda5030"
				id: e.feedbackId
			}
		})
		console.log(res.result.data[0])
		info.value = res.result.data[0];
		console.log(res)
	})
	
	async function onClickSummit() {
		uni.showLoading({
			title:"正在提交",
			mask: true
		})
		const res = await uniCloud.callFunction({
			name: "updateFeedbackComment",
			data: {
				id: info.value._id,
				comment: info.value.comment
			}
		})
		uni.hideLoading()
		uni.navigateBack()
	}
	
	function onClickConfirm(){
		uni.navigateBack()
	}
	
	function formatDate(timestamp) {
	  const date = new Date(timestamp);
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
	  const day = String(date.getDate()).padStart(2, '0'); // 补零
	  
	  return `${year}-${month}-${day}`;
	}
	
	function formatTime(timestamp) {
	  const date = new Date(timestamp);
	  const hours = String(date.getHours()).padStart(2, '0');
	  const minutes = String(date.getMinutes()).padStart(2, '0');
	  return `${hours}:${minutes}`;
	}
	
	function msToTime(duration) {
	  const seconds = Math.floor((duration / 1000) % 60);
	  const minutes = Math.floor((duration / (1000 * 60)) % 60);
	  const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
	  
	  return `${hours.toString().padStart(2, '0')}时${minutes.toString().padStart(2, '0')}分${seconds.toString().padStart(2, '0')}秒`;
	}

</script>

<style lang="scss">
	.layout{
		background-color: #418a6f;
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;

		padding: 50rpx 20rpx;
		.content{
			height: 100%;
			background-color: white;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			text{
				font-size: 35rpx;
			}
			.item{

			}
			.comment{
				flex: 1;
				padding: 30rpx;
				border-radius: 15rpx;
				background-color: #f7f7f7;
			}
			.textarea{
				display: flex;
				flex: 1;
				padding: 30rpx;
				font-size: 40rpx;
				border-radius: 15rpx;
				background-color: #f7f7f7;
			}
		}

		.summitBtn{
			margin: 20rpx 0;
			color: white;
			font-size: 50rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			background-color: #F6465D;
			border-radius: 60rpx;
		}
		.confirmBtn{
			margin: 20rpx 0;
			color: white;
			font-size: 50rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			background-color: #18BB7C;
			border-radius: 60rpx;
		}
	}
</style>
